<template>
	<div class="mine-shopsettle-detail-wrap">
		<van-nav-bar title="门店详情" left-arrow fixed @click-left="onClickLeft" />

		<div v-if="shopInfo" class="shop-info">
			<div class="shop-info-name">{{ shopInfo.name }}</div>
			<div class="shop-info-li">
				<img class="shop-info-li-icon" src="../../../images/mine/icon_detail_address.png">
				<div class="shop-info-li-text">
					{{ shopInfo.region_name }}
				</div>
			</div>
			<div class="shop-info-li">
				<img class="shop-info-li-icon" src="../../../images/mine/icon_detail_time.png">
				<div class="shop-info-li-text">
					{{ shopInfo.business_time }}
				</div>
			</div>
			<div class="shop-info-li">
				<img class="shop-info-li-icon" src="../../../images/mine/icon_times.png">
				<div class="shop-info-li-text">
					{{ shopInfo.cate_name }}
				</div>
			</div>
			<!-- <div class="shop-info-li" >
				<img class="shop-info-li-icon" src="../../../images/mine/icon_detail_mdrl.png" >
				<div class="shop-info-li-text" >
					{{ shopInfo.subsidy_config_name }}
				</div>
			</div> -->

			<div @click="handleToEditShop" class="edit-btn active-btn">
				<div class="edit-text">编辑店铺</div>
				<img class="edit-arrow" src="../../../images/mine/icon_detail_more.png">
			</div>
		</div>

		<div class="income-box" @click="getBalanceDetail" v-if="shopInfo">
			<div class="income-total">
				<div class="income-total-label">今日收入（元）</div>
				<div class="income-total-val">{{ shopInfo.income_today }}</div>
			</div>
			<div class="income-list">
				<div class="income-li">
					<div class="income-li-val">{{ shopInfo.income_yesterday }}</div>
					<div class="income-li-label">昨日收入</div>
				</div>
				<div class="income-li month-income">
					<div class="income-li-val">{{ shopInfo.income_month }}</div>
					<div class="income-li-label">本月收入</div>
				</div>
				<div class="income-li">
					<div class="income-li-val">{{ shopInfo.income_total }}</div>
					<div class="income-li-label">历史收入</div>
				</div>
			</div>
		</div>
		<div class="income-box box1" v-if="shopInfo" @click="handleToTurnover">
			<div class="income-total" style="color: #fff;">
				<div class="income-total-label">今日营业额（元）</div>
				<div class="income-total-val">{{ shopInfo.turnover.today }}</div>
			</div>
			<div class="income-list"  style="color: #fff;">
				<div class="income-li">
					<div class="income-li-val">{{ shopInfo.turnover.yesterday }}</div>
					<div class="income-li-label">昨日营业额</div>
				</div>
				<div class="income-li month-income">
					<div class="income-li-val">{{ shopInfo.turnover.month }}</div>
					<div class="income-li-label">本月营业额</div>
				</div>
				<div class="income-li">
					<div class="income-li-val">{{ shopInfo.turnover.history }}</div>
					<div class="income-li-label">累计营业额</div>
				</div>
			</div>
		</div>
		<div class="business-box">
			<div class="business-box-label">营业状态</div>
			<van-switch active-color="#67C23A" inactive-color="#DCDFE6" size="20" v-model="checked"
				@change="switchChange" />
		</div>

		<!-- 菜单 -->
		<div class="menu-ul">
			<!-- <div class="menu-li" @click="getBalanceDetail(3)">
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-1.png">
				<div class="menu-li-name">余额明细</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png">
			</div> -->
			<div class="menu-li" @click="handleCredit">
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-2.png">
				<div class="menu-li-name">申请授信</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png">
			</div>
			<div @click="handleVoiceDevice(1)" class="menu-li">
				<img class="menu-li-icon" src="../../../images/mine/icon_sjbd.png">
				<div class="menu-li-name">水机绑定</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png">
			</div>
			<div @click="handleWaterCard" class="menu-li">
				<img class="menu-li-icon" src="../../../images/mine/icon_sk.png">
				<div class="menu-li-name">水卡管理</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png">
			</div>
			<div @click="handleToQr" class="menu-li">
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-3.png">
				<div class="menu-li-name">收款二维码</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png">
			</div>
			<div @click="handleToPayOrder" class="menu-li">
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-4.png">
				<div class="menu-li-name">扫码支付订单</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png">
			</div>
			<div 
			@click="handleVoiceDevice(2)"
			class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/pofit-icon-7.png" >
				<div class="menu-li-name"  >收款播报设置</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div>

			<div @click="handleToOnline" class="menu-li">
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-5.png">
				<div class="menu-li-name">在线买单订单</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png">
			</div>
			<!-- <div 
			@click="handleToSubsidy"
			class="menu-li" >
				<img class="menu-li-icon" src="../../../images/mine/m-s-m-6.png" >
				<div class="menu-li-name"  >查看排队</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png" >
			</div> -->
			<div class="menu-li" @click="handleAgreementShow">
				<img class="menu-li-icon" src="../../../images/mine/icon_sjqy.png">
				<div class="menu-li-name">水机签约</div>
				<img class="menu-li-arrow" src="../../../images/mine/m_s_m_arrow.png">
			</div>
		</div>
		<!-- <van-popup v-model="agreementShow" position="bottom" :style="{ height: '80%' }" round closeable>
			<div class="popup_box">
				<div class="apply_tip">{{ agreementTitle }}</div>
				<div class="agreement" v-html="agreement"></div>
				<div class="detail_btn">
					<div @click="agreementShow=false">不同意</div>
					<div @click="getSign">同意</div>
				</div>
			</div>

		</van-popup> -->

	</div>
</template>

<script>
import {AGREEMENT_CONFIGS} from '@/api/mine'
export default {
	data() {
		return {
			id: this.$route.query.id,
			shopInfo: null,
			checked: false,
			agreementShow: false,
			agreement: '',
			agreementTitle:""
		}
	},
	created() {
		// 门店详情
		this.getShopDetail();



	},
	methods: {
		onClickLeft() {
			this.$router.back()
		},
		// 编辑店铺
		handleToEditShop() {
			this.$router.push({
				name: 'shopSettleShopEdit',
				query: {
					id: this.id
				}
			})
		},

		//水机签约
		handleAgreementShow(){
			this.$router.push({
				name: 'level_credit',
				query: {
					id: this.id,
					msg:1
				}
			})
			// let params={
			// 	id:this.id,
			// 	level:20
			// }
			// this.$http.get(AGREEMENT_CONFIGS,{params}).then(res=>{
			// 	this.agreementShow=true
			// 	this.agreement=res.data[0].content
			// 	this.agreementTitle=res.data[0].name
			// })
		},
		// 收入明细
		getBalanceDetail() {
			this.$router.push({
				path: '/incomeDetail',
				query: {
					id: this.id
				}
			})
		},
		getShopDetail() {
			this.$http.get(`/store/manage/${this.id}/info`)
				.then(res => {

					this.shopInfo = res.data;
					this.checked = res.data.business_status == 1;
				})
		},
		switchChange(bol) {
			this.$http.post(`/store/manage/${this.id}/toggle_business_status`)
				.then(res => {

					this.$toast.success('操作成功');
				})
		},
		//申请授信
		handleCredit() {
			this.$router.push(`/credit?id=${this.id}`)
		},
		// 收款二维码
		handleToQr() {
			this.$router.push(`/authSuccess?id=${this.id}`)
		},
		//营业额明细
		handleToTurnover(){
			this.$router.push({
				name: 'turnover',
				query: {
					id: this.id
				}
			})
		},
		// 扫码支付订单
		handleToPayOrder() {
			this.$router.push({
				name: 'shopSettlePayOrder',
				query: {
					id: this.id
				}
			})
		},
		// 收款播报设置
		handleVoiceDevice(msg) {
			this.$router.push({
				name: 'shopSettleVoiceDevice',
				query: {
					msg:msg,
					id: this.id
				}
			})
		},
		//水卡管理
		handleWaterCard(){
			this.$router.push({
				name: 'waterCard',
				query: {
					id: this.id
				}
			})
		},
		//线下收款码绑定
		handleToPay() {
			this.$router.push({
				name: 'payCodeList',
				query: {
					id: this.id
				}
			})
		},
		// 线上支付
		handleToOnline() {
			this.$router.push({
				name: 'shopSettleOnlinePay',
				query: {
					id: this.id
				}
			})
		},
		// 排队记录
		handleToSubsidy() {
			this.$router.push({
				name: 'shopSettleSubsidyList',
				query: {
					id: this.id
				}
			})
		},
		// 水机签约
		getSign(){
            this.$http.post(`/store/manage/${this.id}/credit_sign_url`, 
                {
                config_id: this.ids,
                redirect_url:location.href.split('#')[0]+'#/shopSettleDetail?id='+this.id}
            ).then(res => {
                // return
                window.location.href = res.data.board_url    
             })
        },
	}
}
</script>

<style lang="scss">
.mine-shopsettle-detail-wrap {
	min-height: 100vh;
	padding-top: 58px;
	background-color: #f5f5f5;
	box-sizing: border-box;

	.van-nav-bar .van-icon {
		color: #333333;
	}

	.van-nav-bar__arrow {
		font-size: 20px;
	}

	.shop-info {
		position: relative;
		width: 7.02rem;
		min-height: 2rem;
		margin: auto;
		margin-bottom: 0.16rem;
		padding: 0.28rem 0.32rem 0.34rem;
		border-radius: 0.16rem;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.edit-btn {
			position: absolute;
			bottom: 1.12rem;
			right: 0.32rem;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.6rem;
			height: 0.52rem;
			border-radius: 0.26rem;
			background: linear-gradient(90deg, #4A89EC 0%, #1261E2 100%);

			.edit-text {
				margin-left: 0.24rem;
				font-weight: 400;
				font-size: 0.24rem;
				color: #FFFFFF;
			}

			.edit-arrow {
				width: 0.28rem;
				height: 0.28rem;
			}
		}

		.shop-info-name {
			margin-left: 0.04rem;
			margin-bottom: 0.14rem;
			line-height: 0.4rem;
			font-weight: 500;
			font-size: 0.28rem;
			color: #333333;
		}

		.shop-info-li {
			display: flex;
			margin-bottom: 0.08rem;

			&:last-child {
				margin-bottom: 0;
			}

			.shop-info-li-icon {
				width: 0.32rem;
				height: 0.32rem;
				margin-top: 0.02rem;
				margin-right: 0.12rem;
			}

			.shop-info-li-text {
				font-size: 0.24rem;
				font-weight: 400;
				line-height: 0.36rem;
				color: #666666;
			}
		}
	}

	.business-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 7.02rem;
		height: 0.96rem;
		padding: 0 0.36rem;
		margin: auto;
		margin-bottom: 0.2rem;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 0.16rem;

		.business-box-label {
			font-weight: 500;
			font-size: 0.28rem;
			color: #333333;
		}
	}

	.menu-ul {
		width: 7.02rem;
		margin: auto;
		padding: 0.08rem 0;
		background-color: #FFFFFF;
		border-radius: 0.16rem;
		box-sizing: border-box;

		.menu-li {
			position: relative;
			display: flex;
			align-items: center;
			height: 0.8rem;
			padding: 0 0.32rem;
			margin-bottom: 0.16rem;

			&:last-child {
				margin-bottom: 0;
			}

			.menu-li-icon {
				width: 0.48rem;
				height: 0.48rem;
			}

			.menu-li-name {
				margin-left: 0.2rem;
				font-weight: 400;
				font-size: 0.28rem;
				color: #333333;
			}

			.menu-li-arrow {
				position: absolute;
				right: 0.32rem;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 0.32rem;
				height: 0.32rem;
			}
		}
	}

	.income-box {
		width: 7.02rem;
		height: 2.3rem;
		margin: auto;
		margin-bottom: 0.24rem;
		background: url('../../../images/mine/mine-shop-detail-bg.png') no-repeat center;
		background-size: cover;

		.income-total {
			display: flex;
			color: #FFD88B;
			margin-left: 0.36rem;

			.income-total-label {
				height: 0.4rem;
				margin-top: 0.42rem;
				margin-right: 0.08rem;
				line-height: 0.4rem;
				font-size: 0.28rem;
				font-weight: 400;
			}

			.income-total-val {
				height: 0.6rem;
				margin-top: 0.28rem;
				line-height: 0.6rem;
				font-size: 0.44rem;
				font-weight: 600;
			}
		}

		.income-list {
			display: flex;
			justify-content: space-between;
			margin-top: 0.28rem;
			color: #D9D9D9;

			.income-li {
				display: flex;
				align-items: center;
				flex-direction: column;
				flex: 1;

				.income-li-val {
					height: 0.4rem;
					margin-bottom: 0.08rem;
					line-height: 0.4rem;
					font-size: 0.28rem;
				}

				.income-li-label {
					height: 0.34rem;
					line-height: 0.34rem;
					font-size: 0.24rem;
				}
			}

			.month-income {
				position: relative;

				&::before {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					content: '';
					width: 0.02rem;
					height: 0.5rem;
					background: rgba(255, 255, 255, 0.2);
				}

				&::after {
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					content: '';
					width: 0.02rem;
					height: 0.5rem;
					background: rgba(255, 255, 255, 0.2);
				}
			}
		}
	}
	.box1{
		background: url('../../../images/mine/icon_mine_bg1.png') no-repeat center;
		background-size: cover;
	}
}

.popup_box {
	position: relative;

	.apply_tip {
		width: 100%;
		padding-top: .2rem;
		text-align: center;
		margin: 0 auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: .32rem;
		color: #000000;
		border-bottom: 1px solid #F2F4F5;
		padding-bottom: .2rem;
	}

	.agreement {
		width: 95%;
		margin: 0 auto;
		font-size: .28rem;
		padding-top: .3rem;
		padding-bottom: .5rem;
		line-height: .5rem;
		margin-bottom: 1.2rem;
	}

	.detail_btn {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-around;
		padding-bottom: .5rem;
		padding-top: .3rem;
		div:first-child {
			width: 40%;
			height: .88rem;
			line-height: .88rem;
			text-align: center;
			border-radius: .44rem;
			border: 1px solid #1D69E4;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: .32rem;
			color: #1D69E4;
			font-style: normal;
		}

		div:last-child {
			width: 40%;
			height: .88rem;
			line-height: .88rem;
			text-align: center;
			border-radius: .44rem;
			border: 1px solid #1D69E4;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: .32rem;
			color: #fff;
			font-style: normal;
			background: linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%);

		}
	}
}
</style>
